.vp-notice-mask {
  position: fixed;
  inset: 0;
  z-index: var(--notice-z-index);
  backdrop-filter: blur(10px);

  @media print {
    display: none;
  }
}

.vp-notice-wrapper {
  position: fixed;
  inset-inline-end: 20px;
  top: 80px;
  z-index: var(--notice-z-index);

  overflow: hidden;

  width: var(--notice-width);
  border-radius: 8px;

  background: var(--notice-c-bg);
  box-shadow: 0 2px 6px 0 var(--notice-c-shadow);

  @media print {
    display: none;
  }

  &.fullscreen {
    top: 50vh;
    right: 50vw;
    left: unset;
    transform: translate(50%, -50%);
  }
}

.vp-notice-title {
  position: relative;

  margin: 0;
  padding: 8px 12px;

  background: var(--notice-c-accent-bg);
  color: var(--notice-c-accent-text);

  font-weight: 500;
  text-align: start;

  .close-icon {
    vertical-align: middle;
    float: right;

    width: 1em;
    height: 1em;
    margin: auto;
    padding: 4px;
    border-radius: 50%;

    background-color: rgb(0 0 0 / 20%);
    color: var(--notice-c-bg);

    cursor: pointer;

    [dir='rtl'] & {
      float: left;
    }

    &:hover {
      background-color: rgb(0 0 0 / 30%);
    }
  }
}

.vp-notice-content {
  margin: 1rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.vp-notice-footer {
  padding-bottom: 8px;
  text-align: center;
}

.vp-notice-footer-action {
  display: inline-block;

  margin: 4px;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;

  background-color: var(--notice-c-control);
  color: var(--notice-c-text);

  cursor: pointer;

  &:hover {
    background-color: var(--notice-c-control-hover);
  }

  &.primary {
    background-color: var(--notice-c-accent-bg);
    color: var(--notice-c-accent-text);

    &:hover {
      background-color: var(--notice-c-accent-hover);
    }
  }
}
